<template>
  <div class="personal">
<!--    蓝色盒子-->
    <div class="blueBox">
        <div class="personalInformation">
<!--    头像盒子-->
          <div class="touxiangBox">
            <img src="https://ts2.cn.mm.bing.net/th?id=OIP-C.4yT-r7ZPQHV_8IIpSfO52AAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
            style="border-radius: 50%"
            width="100"
            height="100"
            >
          </div>
<!--    名称盒子-->
          <div class="usernameBox">
            {{ personal.fareName }}
          </div>
<!--    里程盒子-->
          <div class="mileageBox">
            {{ $t('mileage') }} :{{ personal.fareMileage }}
            </div>
        </div>
    </div>
<!--    大盒子-->
    <div class="bigBox">
<!--    常用地址盒子-->
      <div class="addressBox" @click="usually">
        <div class="zujian1"> <van-icon name="star" size="40" color="white"/></div>
        <div class="address">{{ $t('address') }}</div>
      </div>
<!--      修改密码盒子-->
      <div class="passwordBox" @click="password">
        <div class="zujian2"> <van-icon name="records" size="40" color="white"/></div>
        <div class="password">{{ $t('password') }}</div>
      </div>
<!--      修改手机号盒子-->
      <div class="phoneBox" @click="iphone">
        <div class="zujian3"> <van-icon name="phone" size="40" color="white"/></div>
        <div class="phone1111">{{ $t('phone') }}</div>
      </div>
    </div>
<!--    中间盒子-->
    <div class="middleBox">
<!--      用户指南盒子-->
      <div class="guideBox" @click="guide">
        <div class="zujian4">
          <van-icon name="todo-list" size="40" color="white"/>
        </div>
        <div class="guide1111">
          {{ $t('user') }}
        </div>
      </div>
<!--      设置盒子-->
      <div class="settingBox" @click="setting">
        <div class="zujian5">
          <van-icon name="setting" size="40" color="white"/>
        </div>
        <div class="setting1111">
          {{ $t('setting') }}
        </div>
      </div>
<!--      关于盒子-->
      <div class="aboutBox" @click="aboutUs">
        <div class="zujian6">
          <van-icon name="warning" size="40" color="white"/>
        </div>
        <div class="about">
          {{ $t('about') }}
        </div>
      </div>
    </div>
    <BottomPanel/>
  </div>
</template>

<script>
import BottomPanel from "@/views/bottomPanel.vue";
import {getPersonal} from "@/api/personal/personal";
export default {
  components: {BottomPanel},
  created() {
    // 查询所有个人信息
    this.findPersonal()
  },
  methods: {
    // 查询所有个人信息
    findPersonal(){
      getPersonal().then(res => {
        // console.log(res)
        // this.personal = res[res.length-1]
        this.personal = res[0]
        // console.log(res[0].passengerId)
        // this.personal.passengerId=res[0].passengerId
      })
    },
    guide() {
      this.$router.push({path: '/guide'})
    },
    setting() {
      this.$router.push({path: '/setting'})
    },
    aboutUs() {
      this.$router.push({path: '/aboutUs'})
    },
    password() {
      this.$router.push({path: '/password'})
    },
    iphone()
    {
      this.$router.push({path: '/phone'})
    },
    usually()
    {
      this.$router.push({path: '/usually'})
    },
  },
  data() {
    return {
      id:'',
      personal:[],
    }
  },


}
</script>


<style>
.blueBox
{
  width: 100%;
  height: 250px;
  background-color: #93d2ee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.personalInformation{
  width: 90%;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
}
.usernameBox{
  width: 70px;
  height: 20px;
  margin-top: 20px;
  margin-left: 24px;
  color: white;
  display: inline-block;
}
.mileageBox{
  margin-left: -70px;
  width: 150px;
  height: 40px;
  margin-top: 50px;
  color: white;
  display: inline-block;

}
.bigBox{
  width: 75%;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  margin-left: 100px;
  text-align: center;
}
.addressBox{
  width: 100px;
  height: 100px;
  border-right: darkgray 1px dashed;
}
.address{
  font-size: 17px;
  text-align: center;
}
.phone1111{
  font-size: 17px;
  text-align: center;
}
.password{
  font-size: 17px;
  text-align: center;
}
.zujian1{
  width: 50px;
  height: 50px;
  margin-top: 8%;
  margin-left: 8%;
  background-color: #f692de;
}
.passwordBox{
  width: 100px;
  height: 100px;
  border-right: darkgray 1px dashed;
}
.zujian2{
  width: 50px;
  height: 50px;
  margin-top: 8%;
  margin-left: 8%;
  background-color: #f6e992;
}
.phoneBox{
  width: 100px;
  height: 100px;
}
.zujian3{
  width: 50px;
  height: 50px;
  margin-top: 8%;
  margin-left: 8%;
  background-color: #92f6b5;
}
.middleBox{
  width: 90%;
  height: 300px;
  margin-left: 10%;
  margin-top: 5%;
}
.guideBox{
  width: 90%;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  line-height: 100px;
  border-bottom: darkgray 1px dashed;
}
.zujian4{
  width: 50px;
  height: 50px;
  background-color: #92f6b5;
  display: flex;
  margin-top: 25px;
}
.guide1111{
  font-size: 20px;
  margin-left: 20%;
}
.settingBox{
  width: 90%;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  line-height: 100px;
  border-bottom: darkgray 1px dashed;
}
.zujian5{
  width: 50px;
  height: 50px;
  background-color: #f6ee92;
  display: flex;
  margin-top: 5%;
}
.setting1111{
  font-size: 20px;
  margin-left: 20%;
}
.aboutBox{
  width: 90%;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  line-height: 100px;
  border-bottom: darkgray 1px dashed;
}
.zujian6{
  width: 50px;
  height: 50px;
  background-color: #f692a1;
  display: flex;
  margin-top: 25px;
}
.about{
  font-size: 20px;
  margin-left: 20%;

}
.personal{
  width: 100%;
  height: 100vh;
}
</style>